<template>
  <div>
    <overview-nav />
    <div class="container-main">
      <el-form
        class="build-form"
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <div class="title-header">
          应用配置
          <p class="sub-title">一键构建生成多环境发布包下载，也可一键发布容器平台</p>
        </div>

          <el-divider content-position="left">基本信息</el-divider>

          <el-form-item label="应用图标" prop="icons">
              <div class="gvwTmF" v-model="formData.icons" @click="projectIconsVisible = true" :style="{backgroundImage:'url('+ projectIconSelect +')'}" />
          </el-form-item>

          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="formData.projectName"
              placeholder="请输入项目名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button @click="submitForm">保存</el-button>
          </el-form-item>

      </el-form>


    </div>

      <el-dialog
          title="选择项目图标"
          :visible.sync="projectIconsVisible"
          width="600px">

          <el-avatar :size="50" class="projectIcon" :key="index" v-for="(item , index) in 31" src="https://empty">
              <img :src="showProjectIcon(item)" @click="selectProjectIcons(item)" />
          </el-avatar>

          <span slot="footer" class="dialog-footer">
              <el-button @click="projectIconsVisible = false">取 消</el-button>
          </span>
      </el-dialog>

  </div>
</template>

<script>
import OverviewNav from "./overviewNav";
export default {
  components: {
    OverviewNav,
  },
  data() {
    return {
      projectIconSelect: 'https://gw.alicdn.com/tfs/TB197e_CHrpK1RjSZTEXXcWAVXa-102-102.png' ,
      projectIconsVisible: false ,
      formData: {
        icons: '',
        projectName: '',
      },
      rules: {
        icons: [
          {
            required: true,
            message: "请选择图标",
            trigger: "change",
          },
        ],
        projectName: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    showProjectIcon(item){
      return require('@/asserts/icons/project/' + item + '.svg');
    },
    selectProjectIcons(item){
      this.projectIconsVisible  = false ;
      this.projectIconSelect = require('@/asserts/icons/project/' + item + '.svg')
      this.formData.icons = 'asserts/icons/project/' + item + '.svg' ;
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/asserts/css/build/component.scss';

.build-form{
  width: 980px;
  max-width: 980px;
  margin: auto;

  .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
      background-color: #fff ;
  }
}

.projectIcon {
    margin: 10px;
    cursor: pointer;
    background: #f7f9fa;
}

.gvwTmF{
  margin-bottom: 0px !important ;
}

.title-header{
  text-align: center;
  padding: 20px;
  font-size: 25px;

  .sub-title {
    font-size: 13px ;
    font-weight: normal ;
  }
}

</style>
